class MessageBox {
  constructor(config) {
    this.$config = Object.assign(
      {
        width: 800,
      },
      config
    )
    this.el = document.createElement('div')
    this.el.classList.add('message-box')
    this.create()
    this.bindSuccessCallback()
  }
  //创建元素
  create() {
    const html = `
    <div class="message-box" style="width:${this.$config.width}px">
      <div class="bg"></div>
      <div class="card">
        <header>
          标题名称
          <span>X</span>
        </header>
        <main>消息内容</main>
        <footer>
          <button>确定</button>
        </footer>
      </div>
      </div>
    `
    this.el.innerHTML = html
    document.body.appendChild(this.el)
  }
  bindSuccessCallback() {
    const bt = document.querySelector('.message-box button')
    bt.addEventListener('click', this.$config.success.bind(this))
  }
  hide() {
    this.el.remove()
  }
}

export default function (config) {
  return new MessageBox(config)
}
